<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 单向绑定：视图不会更新数据，但数据发生改变视图会改变    -->
        <!--    <input v-bind:value="str" type="text">-->
        <!--    <input :value="str" type="text">-->

        <!-- 双向绑定：视图发生改变数据会变，数据改变视图也会改变    -->
        <!--    <input @input="changeStr" :value="str" type="text">-->
        <!--    <input @input="str=$event.target.value" :value="str" type="text">-->
        <!--    <input @input="changeStr2($event)" :value="str" type="text">-->

        <!-- 可以通过v-model指令实现双向绑定    -->
        <input v-model="str" type="text">
        <!-- 注意：v-model只可以与表单元素结合使用-->
        <!--    <div v-model="str"></div>-->
        <h3>{{str}}</h3>
    </div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            str:"大家好！我叫刘德华！"
        },
        methods:{
            changeStr(e){
                this.str = e.target.value;
                // console.log(e.target.value)
            },
            changeStr2(e){
                this.str = e.target.value;
            }
        }
    })
</script>
</html>